<template>
  <div class="test">
      <div class="upload">           
        <input type="file" id="file" multiple @change="upload">
      </div>

      <button @click="editIt">点击我上传</button>

      <ul class="view">
        <li v-for="(item, index) in list" :key="index" >
          <img :src="item">
          <div class="delect" @click="delect(index)">x</div>
        </li>     
      </ul>
  </div>
</template>

<script>
export default {
  data() {
     return {
        list:[],
     }
  },
  methods: {
      editIt() {
        var fileInput = document.getElementById("file");
        fileInput.click();
      },
      upload(e){
        //e.target指向事件执行时鼠标所点击区域的那个元素，那么为input的标签，
        // 可以输出 e.target.files 看看，这个files对象保存着选中的所有的图片的信息。
        console.log(e.target.files)
        //------------------------------------------------------     
        // 既然如此，循环这个files对象，用for of 循环，     
        for(let item of e.target.files) {
          //正则表达式，判断每个元素的type属性是否为图片形式，如图
          if (!/image\/\w+/.test(item.type)) {
          // 提示只能是图片，return
            alert("只能选择图片");
            return;
          }
          // 保存下当前 this ，就是vue实例
          var _this = this;
          //  创建一个FileReader()对象，它里面有个readAsDataURL方法
          let reader = new FileReader();
            // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径, 
            reader.readAsDataURL(item);
            //文件读取成功完成时触发
            reader.addEventListener('load',function(){
            //  reader.result返回文件的内容。
              //只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。
                //给数组添加这个文件也就是图片的内容
              _this.list.push(this.result);

            })
          }
      },
      delect(index){
          console.log(index);
          this.list.splice(index,1);                    
      },

  }
}
</script>

<style>

.test{
    width: 100%;
    background-color: rgb(241, 241, 241);
    margin: 50px auto;
    height: 100%;
} 
.view{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: space-around;
}
 .view > li{
    width: 200px;
    height: 150px;
    background-color: rgba(54, 194, 35,0.1);
    list-style: none;
    margin: 10px;
    position: relative;
}
.view > li > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.delect{
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    background-color: rgba(255, 255, 255,0.5);
    user-select: none;
    cursor: pointer;
    opacity: 0;
}
.delect:hover{
    
    background-color: rgba(31, 31, 31, 0.5);
      color: white;
}
.view>li:hover .delect{
    opacity: 1;
}
.upload{
  display: none;
  width: 80px;
  height: 20px;
  background-color: rgba(135, 206, 235,0.2);
  border: 1px dashed black;
  border-radius: 5px;
  position: relative;

}
.upload:hover{
    background-color: rgba(135, 206, 235,1);
}
.upload::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '上传图片';
    font-size: 13px;
    text-align: center;
    font-family: 'fangsong';
    line-height: 20px;
    user-select: none;
}
#file{
    width: 100%;
    height: 100%;
    opacity: 0;
}

</style>